<template>
  <view class="basictitle">
    <view class="jiben">
      <view class="image">
        <view class="example-body custom-image-box" @click="select">
          <image :src="images" mode="scaleToFill" class="example-image" v-if="images !== ''" />
          <view class="caption">更换头像</view>
        </view>
      </view>
    </view>
    <view class="segmentation"></view>
    <view class="form">
      <uni-section>
        <view class="example">
          <!-- 基础用法，不包含校验规则 -->
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :label-width="90"
            class="custom-forms"
          >
            <uni-forms-item label="性别" class="custom-input" request>
                <uni-data-select
                  v-model="baseFormData.gender"
                  :localdata="range"
                  @change="change"
                ></uni-data-select>
              <!-- <uni-easyinput v-model="baseFormData.gender" placeholder="请选择性别" /> -->
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="昵称" request>
              <uni-easyinput v-model="baseFormData.nickname" placeholder="请输入昵称" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="生日" request>
              <uni-datetime-picker
                type="date"
                return-type="data"
                :clear-icon="false"
                v-model="baseFormData.birthdate"
                :value="baseFormData.birthdate"
                @maskClick="maskClick"
                @change="changeTime"
              />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="工作地区">
              <uni-easyinput v-model="baseFormData.work_region" placeholder="选择工作地区" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="户籍地区">
              <uni-easyinput v-model="baseFormData.household_region" placeholder="请选择户籍地区" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="婚姻状况">
              <uni-easyinput v-model="baseFormData.marital_status" placeholder="请选择婚姻状况" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
    <view class="segmentation"></view>
    <view class="footer-form">
      <uni-section>
        <view class="example">
          <!-- 基础用法，不包含校验规则 -->
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :label-width="90"
            class="custom-forms"
          >
            <uni-forms-item label="身高" class="custom-input">
              <uni-easyinput v-model="baseFormData.height" placeholder="请输入身高" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="体重">
              <uni-easyinput v-model="baseFormData.weight" placeholder="请输入体重" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="学历">
              <uni-easyinput v-model="baseFormData.education" placeholder="请输入学历" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="月收入">
              <uni-easyinput v-model="baseFormData.monthly_income" placeholder="请输入收入" />
            </uni-forms-item>
            <view class="hrs"></view>
            <uni-forms-item label="职业">
              <uni-easyinput v-model="baseFormData.occupation" placeholder="请输入职业" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onBeforeUnmount } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getUserAPI } from '@/services/my'

const ids = ref<string>('')
const images = ref('')
const range=ref([
  { text: '男', value: 0 },
  { text: '女', value: 1 },
])
const imageStyles = reactive({
  width: '170rpx',
  height: '170rpx',
  border: {
    radius: '50%',
    color: '#c2ebf0',
    style: 'Dashed',
    width: '6rpx',
  },
})

interface baseFormDataFace {
  id: string //用户id
  avatar: string //头像
  gender: string //性别
  nickname: string //昵称
  birthdate: string //生日
  work_region: string //工作地区
  household_region: string //户籍地区
  marital_status: string //婚姻状况
  height: string //身高
  weight: string //体重
  education: string //学历
  monthly_income: string //月收入
  occupation: string //职业
  age: number //年龄
  work_time: number //工作年限
}

// 基础表单数据
const baseFormData = reactive<baseFormDataFace>({
  id: '', //用户id
  avatar: '', //头像
  gender: '', //性别
  nickname: '', //昵称
  birthdate: '', //生日
  work_region: '', //工作地区
  household_region: '', //户籍地区
  marital_status: '', //婚姻状况
  height: '', //身高
  weight: '', //体重
  education: '', //学历
  monthly_income: '', //月收入
  occupation: '', //职业
  age: 0, //年龄
  work_time: 0, //工作年限
})

// 本地数据
const baseFormDataList = reactive<baseFormDataFace>({
  id: '', //用户id
  avatar: '', //头像
  gender: '', //性别
  nickname: '', //昵称
  birthdate: '', //生日
  work_region: '', //工作地区
  household_region: '', //户籍地区
  marital_status: '', //婚姻状况
  height: '', //身高
  weight: '', //体重
  education: '', //学历
  monthly_income: '', //月收入
  occupation: '', //职业
  age: 0, //年龄
  work_time: 0, //工作年限
})

// 日期事件
const maskClick = (e: any) => {
  console.log('maskClick事件:', e)
}

// 下一步点击事件
const nextStep = () => {
  console.log('下一步点击事件')
  console.log(baseFormData)
}

const changeTime = (e: any) => {
  console.log(e, '454154653415634163')
  baseFormData.birthdate = e
  const ageData = new Date()
  // 获取当前日期
  const year = ageData.getFullYear()
  const month = ageData.getMonth() + 1
  const date = ageData.getDate()
  const time = ageData.getTime()
  // 获取用户输入的出生日期
  // 计算年龄
  const age = year - parseInt(e.split(5))
  baseFormData.age = age
  console.log(age)
}
const avatar = ref('')
// 获取用户信息并回显
const getUserList = async () => {
  let DataList = await getUserAPI(ids.value)
  console.log(DataList.my_list, '这是用户的数据')
  baseFormData.gender = DataList.my_list.gender
  baseFormData.nickname = DataList.my_list.nickname
  baseFormData.birthdate = DataList.my_list.birthdate
  baseFormData.work_region = DataList.my_list.work_region
  baseFormData.household_region = DataList.my_list.household_region
  baseFormData.marital_status = DataList.my_list.marital_status
  baseFormData.height = DataList.my_list.height
  baseFormData.weight = DataList.my_list.weight
  baseFormData.education = DataList.my_list.education
  baseFormData.monthly_income = DataList.my_list.monthly_income
  baseFormData.occupation = DataList.my_list.occupation
  baseFormData.age = DataList.my_list.age
  baseFormData.work_time = DataList.my_list.work_time
  baseFormData.id = DataList.my_list.id
  baseFormData.avatar = DataList.my_list.avatar
  images.value = DataList.fileUrl + DataList.my_list.avatar
  avatar.value = DataList.my_list.avatar
}

// 页面切换时保存数据
onBeforeUnmount(() => {
  baseFormDataList.gender = baseFormData.gender
  baseFormDataList.nickname = baseFormData.nickname
  baseFormDataList.birthdate = baseFormData.birthdate
  baseFormDataList.work_region = baseFormData.work_region
  baseFormDataList.household_region = baseFormData.household_region
  baseFormDataList.marital_status = baseFormData.marital_status
  baseFormDataList.height = baseFormData.height
  baseFormDataList.weight = baseFormData.weight
  baseFormDataList.education = baseFormData.education
  baseFormDataList.monthly_income = baseFormData.monthly_income
  baseFormDataList.occupation = baseFormData.occupation
  ;(baseFormDataList.avatar = avatar.value), (baseFormDataList.age = baseFormData.age)
  uni.setStorageSync('baseFormData', baseFormDataList)
})

onShow(() => {
  ids.value = uni.getStorageSync('userInfo').id
  baseFormDataList.id = ids.value
  getUserList()
})

const select = (e: any, v: any) => {
  console.log(e)
  uni.chooseImage({
    success: async (res) => {
      for (const tempFilePath of res.tempFilePaths) {
        const uploadRes = await uploadImage(tempFilePath)
        if (uploadRes) {
          // console.log(uploadRes.imageUrl)
          console.log(uploadRes)
          images.value = uploadRes?.fileUrl + uploadRes?.imageUrl
          avatar.value = uploadRes?.imageUrl
          // console.log(images.value)
        }
      }
    },
    fail: (error) => {
      console.log(error)
    },
  })
}

// 上传头像
const uploadImage = async (filePath) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: '/post/api/v1/develop/uploadImage', // 替换为实际的上传接口地址
      filePath: filePath,
      name: 'file',
      // formData: {
      //   user_id: userId,
      //   // 如果有其他表单数据需要上传，可以在这里添加
      // },
      success: (uploadRes) => {
        const response = JSON.parse(uploadRes.data)
        // console.log(response)
        resolve(response.data) // 解析 JSON 数据并返回
      },
      fail: (error) => {
        console.error('上传失败:', error)
        uni.showToast({
          title: '上传失败',
          icon: 'none',
        })
        reject(error)
      },
    })
  })
}
</script>

<style lang="scss" scoped>
.segmentation {
  width: 100vw;
  height: 2%;
  margin-left: -6%;
  margin-right: -3%;
}
.hrs {
  height: 1px; /* 对于水平线 */
  transform: scaleY(0.5);
  background-color: #ef8da9;
  width: calc(100% + 40rpx);
  margin-left: -20rpx;
  margin-bottom: 20rpx;
  margin-top: -20rpx;
}
.basictitle {
  width: 100%;
  height: 84vh;
  overflow-x: hidden;

  .jiben {
    width: 100%;
    height: 12%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    .custom-image-box {
      width: 134.66rpx;
      height: 134.66rpx;
      /* #ifndef APP-NVUE */
      /* #endif */
      border-radius: 50%;
      /* 设置为圆形 */
      background: linear-gradient(135deg, #ec7596, #f8d4d9);
      /* 渐变背景色 */
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      .caption {
        position: absolute;
        bottom: 0;
        /* 半透明白色背景 */
        background: rgba(255, 255, 255, 0.8);
        padding: 10rpx 15rpx;
        border-radius: 15rpx;
        font-size: 17rpx;
        color: #e57373;
        border-radius: 50%;
        /* 粉红色字体 */
      }
      .example-image {
        position: absolute;
        top: 0px;
        border-radius: 50%;
        width: 134.66rpx;
        height: 134.66rpx;
      }
    }

    .photo {
      width: 20vw;
      height: 20vw;
      text-align: center;
    }

    .top {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      text-align: center;
      color: #60cad8;
      margin-bottom: 10rpx;
    }
  }

  .station {
    height: 2%;
  }

  .footer-button {
    position: sticky;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;

    button {
      color: #fff;
    }
  }
}
.custom-input {
  border: 1px solid red;
}

.example {
  border: 1px solid #f3b0c3;
  width: 90vw;
  border-radius: 40rpx;
  margin: auto;
  box-sizing: border-box;
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  background-color: #fbfbfb;
}
.button {
  margin-bottom: 10px;
}

.warp {
  padding: 10px;
  box-sizing: border-box;
}

.button {
  margin-bottom: 10px;
}
</style>
